<!-- 首页 -->
<template>
  <div class="w-full h-full relative">
    <div id="map" class="w-full h-full absolute"></div>
    <el-button class="absolute top-0 left-0" @click="clearMarkLayer">
      清除图层
    </el-button>

    <!-- <el-button class="absolute top-10 left-0" @click="removeDraw">
      清除绘制图层
    </el-button> -->

    <div class="absolute bottom-0 left-0">
      <template v-for="i in 22" :key="i">
        <el-button @click="clickZoom(i)">{{ i }}</el-button>
      </template>
    </div>
  </div>

  <PopupTemplate ref="popupTemplate" />
</template>

<script setup name="home" lang="ts">
import Position from '@/util/position'
import PopupTemplate from './popupTemplate.vue'
import { onMounted, ref } from 'vue'
import { PointLayer } from '@antv/l7'

const { $antvMap } = window

let mapObject: any = new $antvMap.MapObject({ id: 'map' })

const position = new Position()

let popupTemplate = ref<any>()

onMounted(async () => {
  await mapObject.isLoaded()
  // mapObject.view.on('click', (e: any) => {
  //   popupTemplate.value.closePopup()
  //   setTimeout(() => {
  //     console.log(e, 'this is click')
  //     const { lat, lng } = e.lngLat
  //     popupTemplate.value.openPopup(lng, lat)
  //   })
  // })
  addMarkLayer()
  addLineLayer()
  addPolygonLayer()

  const { view, sceneClick } = mapObject
  view.on('click', (e: any) => {
    console.log($antvMap.layers)
    const results = sceneClick(e)
    console.log(results, 'this is results')
    let targetItem =
      results.markers[0] || results.lines[0] || results.polygons[0]
    if (targetItem) {
      mapObject.addHighLight({ data: targetItem })
    } else {
      mapObject.removeHighLight()
    }
  })

  // const data = await mapObject.drawPolygon('multiple')
  // console.log(data, 'this is data')
  // drawPoint.on(DrawEvent.Add, (val: any) => {
  //   console.log(val, 'this is val')
  // })
})

const addMarkLayer = () => {
  const arr = [
    {
      name: 'mark1',
      x: 113.37108,
      y: 23.069543,
    },
    {
      name: 'mark2',
      x: 113.37118,
      y: 23.069533,
    },
  ]
  // arr.forEach((item: any) => {
  //   const el = document.createElement('img')
  //   // el.setAttribute('class', 'test-mark')
  //   el.src = new URL('/static/image/mark.png', import.meta.url).href
  //   el.style.width = '30px'
  //   el.style.height = '30px'
  //   item.el = el
  // })

  // const el = document.createElement('img')
  // el.src = new URL('/static/image/mark.png', import.meta.url).href
  // el.style.width = '30px'
  // el.style.height = '30px'

  const el = document.createElement('div')
  el.setAttribute('class', 'test-mark')

  mapObject.addMarkerLayer({
    id: 'test1',
    data: arr,
    el,
  })

  console.log('点中心点', mapObject.getCenter(arr[0]))
}

const clickZoom = (zoom: number) => {
  mapObject.view.setZoom(zoom)
}

const addLineLayer = () => {
  const data = [
    {
      name: '这是线1',
      color: '#0ff',
      geometry: {
        paths: [
          [113.37108, 23.069543],
          [113.37118, 23.069533],
        ],
      },
    },
    {
      name: '这是线2',
      color: '#0ff',
      geometry: {
        paths: [
          [113.37108, 23.069543],
          [113.37118, 23.069533],
        ],
      },
    },
  ]

  mapObject.addLineLayer({
    id: 'test2',
    type: 'GeoJSON',
    data: $antvMap.dealLineGeoJSON(data),
    // data,
  })
  console.log('线中心点', mapObject.getCenter(data[0]))
}

const addPolygonLayer = () => {
  const data = [
    {
      name: '这是面1',
      // color: 'yellow',
      // outlineColor: 'blue',
      geometry: {
        rings: [
          [
            [113.37108, 23.069543],
            [113.37108, 23.069443],
            [113.37118, 23.069443],
            [113.37118, 23.069543],
            [113.37108, 23.069543],
          ],
        ],
      },
    },
    {
      name: '这是面2',
      // color: 'yellow',
      // outlineColor: 'blue',
      geometry: {
        rings: [
          [
            [113.37108, 23.069543],
            [113.37108, 23.069443],
            [113.37118, 23.069443],
            [113.37118, 23.069543],
          ],
        ],
      },
    },
  ]

  mapObject.addPolygonLayer({
    id: 'test3',
    data,
  })
  console.log('面中心点', mapObject.getCenter(data[0]))
  const center = mapObject.getCenter(data[0])
  mapObject.addPointLayer({
    id: 'test5',
    type: 'GeoJSON',
    data: $antvMap.dealPointGeoJSON({ x: center[0], y: center[1] }),
    isGoto: false,
  })
  console.log($antvMap)
}

const clearMarkLayer = () => {
  mapObject.removeAllLayer()
}

const removeDraw = () => {
  mapObject.removeDraw()
}
</script>

<style lang="scss">
.test-mark {
  width: 30px;
  height: 30px;
  background-image: url('/public/static/image/mark.png');
  background-size: cover;
}
</style>
<style lang="scss" scoped></style>
